<template>
  <editor
    v-model="content"
    :init="tinymceInit"
  />
</template>

<script>
import { uploadFile } from "@/utils/oss"
// tinymce
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/tinymce'
import 'tinymce/models/dom'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default'
import '../../../../public/tinymce/langs/zh_CN.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'
// 插件
import 'tinymce/plugins/image/plugin.min.js'
import 'tinymce/plugins/table/plugin.min.js'

export default {
  components: {
    Editor
  },
  data() {
    return {
      content: '',
      apiKey: "n58jtcxz6ewghpsslbx6z7cf5v4a8biku9l8b7ttr0h9pb1i",
      tinymceInit: {
        language: "zh_CN",
        height: 500,
        plugins: ["table", "image"],
        content_css: 'content.css',
        toolbar: `undo redo | formatselect | bold italic backcolor
        | alignleft aligncenter alignright alignjustify
        | bullist numlist outdent indent | removeformat image table | help`,
        images_upload_handler(blobInfo, success, failure) {
          return new Promise((resolve, reject) => {
            const result = uploadFile(blobInfo.blob())
            result
              .then(imageUrl => {
                console.log("img url 1", imageUrl)// OSS上传
                success(imageUrl)
                resolve(imageUrl)
              })
              .catch(err => {
                failure(err)
              })
          })
        }
      }
    }
  },
  watch: {
    content(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    init(value) {
      this.content = value
    }
  }
}
</script>
<style lang="scss">
.mce-content-body {
  position: relative;
}
</style>
